<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    #app {
      width: 100%;
    }

    .main {
      width: 100%;
      /* height: ; */
    }

    .tr {
      float: left;
      width: 16%;
      /* border: 1px solid skyblue; */
      text-align: center;
      padding-top: 40px;
    }

    .empty {
      width: 100%;
      color: #c6c6c6;
      font-size: 40px;
      text-align: center;
      /* margin-top: 100px; */
    }

    .table {
      width: 100%;
      height: 100px;
      /* background-color: pink; */
    }

    .td {
      width: 16%;
      float: left;
      line-height: 100px;
      text-align: center;
    }

    .tbody {
      width: 100%;
      height: 140px;
      margin-bottom: 10px;
    }

    .td img {
      width: 100%;
      height: 100px;
    }

    .active {
      background-color: #f5f7fb;
    }

    .tbody button {
      width: 60px;
      height: 40px;
      font-size: 20px;
    }

    .left {
      margin-left: 125px;
      float: left;
    }

    .right {
      float: right;
    }

    .right p {
      display: inline;
      color: red;
      font-size: 30px;
    }

    .del {
      background-color: #e5473b;
      border: none;
      color: white;
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="main" v-if="fruitList.length > 0">
      <div class="table">
        <div class="thread">
          <div class="tr">选中</div>
          <div class="tr">图片</div>
          <div class="tr">单价</div>
          <div class="tr">个数</div>
          <div class="tr">小计</div>
          <div class="tr">操作</div>
        </div>
      </div>

      <div class="tbody" :class="{active: item.isChecked}" v-for="(item, index) in fruitList " :key="item.id">
        <div class="td"><input type="checkbox" v-model="item.isChecked"></div>
        <div class="td"><img :src="item.icon" alt=""></div>
        <div class="td">{{item.price}}</div>
        <div class="td">
          <!-- 这个需要注意的是 当数量小于等于1的时候减号按钮要被禁掉 -->
          <button :disabled="item.num <= 1" @click="item.num--">-</button>
          <span>{{item.num}}</span>
          <button @click="item.num++">+</button>
        </div>
        <div class="td">{{item.price * item.num}}</div>
        <div class="td"><button @click="del(item.id)" class="del">删除</button></div>
      </div>

      <div class="sum">
        <div class="left"><input type="checkbox" v-model="isAll">全选</div>
        <div class="right">
          总价: ￥ <p>{{totalPrice}}</p>
          <button
            style="background-color: #3781fe; border: none; width: 80px; height: 30px; color: white;">结算({{totalCount}})</button>
        </div>
      </div>
    </div>
    <div class="empty" v-else>
      🛒空空如也
    </div>
  </div>

  <script src="../vue.js"></script>
  <script>
    const defaultArr = [
      {
        id: 1,
        icon: '../images/水果1.png',
        isChecked: true,
        num: 2,
        price: 6
      },
      {
        id: 2,
        icon: '../images/水果2.png',
        isChecked: false,
        num: 7,
        price: 20
      },
      {
        id: 3,
        icon: '../images/水果3.png',
        isChecked: true,
        num: 4,
        price: 12
      },
    ]
    const app = new Vue({
      el: '#app',
      data: {
        fruitList: JSON.parse(localStorage.getItem('list')) || defaultArr,
      },
      methods: {
        del(id) {
          this.fruitList = this.fruitList.filter(item => item.id != id)
        }
      },
      watch: {
        fruitList: {
          deep: true,
          handler(newValue) {
            //需要把变化后的数据 存取到本地里面(转JSON)
            localStorage.setItem('list', JSON.stringify(newValue))
          }
        }
      },
      computed: {
        isAll: {//默认的是只能获取 不能设置
          //全部的都选中才全选 -> every
          get() {
            return this.fruitList.every(item => item.isChecked)
          },
          set(value) {
            //拿到布尔值 让全部的小选框 同步状态
            //这个也算是forEach的遍历了
            this.fruitList.forEach(item => item.isChecked = value)
          }
        },
        //统计总数
        totalCount() {
          //注意 加的是选中的
          return this.fruitList.reduce((sum, item) => {
            if (item.isChecked) {
              return sum + item.num
            } else {
              return sum
            }
          }, 0)
        },
        //统计选中的总价
        totalPrice() {
          return this.fruitList.reduce((sum, item) => {
            if (item.isChecked) {
              return sum + item.num * item.price
            } else {
              return sum
            }
          }, 0)
        }
      },
    })
  </script>
</body>

</html>